<template>
  <div class="mvList">
    <div v-for="item in MVList" :key="item.id" class="mvItem">
      <mv-item
        :playCount="item.playCount"
        :picUrl="item.imgurl"
        :name="item.name"
        :nickname="item.nickname"
      ></mv-item>
    </div>
  </div>
</template>

<script setup lang="ts">
import mvItem from "@/components/songItem.vue";
import { onMounted, ref } from "vue";
import axios from "@/http";
import { useRoute } from "vue-router";
onMounted(() => {
  getMVList();
});
const route = useRoute();
const more = ref<boolean>(true);
const MVList = ref([]);
const offset = ref(0);
const getMVList = () => {
  const { id } = route.params;
  axios
    .get("/artist/mv", {
      params: { id, limit: 30, offset: offset.value },
    })
    .then((res) => {
      console.log(res);

      offset.value++;
      MVList.value = [...MVList.value, ...res.data.mvs];
      more.value = res.data.hasMore;
    });
};
const timer = ref(null);
const freshData = (e) => {
  const { scrollTop, scrollHeight } = e.target;
  if (timer.value) {
    clearTimeout(timer.value);
  }
  timer.value = setTimeout(() => {
    if (scrollTop + 650 > scrollHeight) {
      more.value && getMVList();
    }
  }, 200);
};
</script>

<style scoped lang="scss">
.mvList {
  display: flex;
  flex-wrap: wrap;
  margin-top: 36px;
  justify-content: space-between;
  .mvItem {
    flex-basis: 236px;
    position: relative;
  }
}
</style>
